<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>县城小超市ERP系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #2563eb;
            --secondary: #3b82f6;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --light: #f8fafc;
            --dark: #1e293b;
            --dark-blue: #0f172a;
            --gray: #64748b;
            --border: #e2e8f0;
            --bg-gradient: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
            --card-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
            --glass-bg: rgba(21, 39, 77, 0.65);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        body {
            background: var(--bg-gradient);
            color: var(--light);
            min-height: 100vh;
            overflow-x: hidden;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }

        /* 强制横屏提示 */
        .orientation-warning {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.95);
            color: white;
            z-index: 1000;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 25px;
        }

        .orientation-warning i {
            font-size: 5rem;
            margin-bottom: 25px;
            color: var(--warning);
            animation: rotate 2s infinite linear;
        }

        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .orientation-warning h2 {
            font-size: 2rem;
            margin-bottom: 15px;
            background: linear-gradient(90deg, #f59e0b, #fde047);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .orientation-warning p {
            font-size: 1.2rem;
            max-width: 500px;
            line-height: 1.6;
        }

        @media screen and (orientation: portrait) {
            .orientation-warning {
                display: flex;
            }
        }

        /* 主容器 */
        .container {
            display: flex;
            min-height: 100vh;
            max-width: 100%;
            margin: 0 auto;
            overflow: hidden;
        }

        /* 侧边导航 */
        .sidebar {
            width: 90px;
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 25px 0;
            border-right: 1px solid rgba(255, 255, 255, 0.08);
            z-index: 10;
        }

        .logo {
            width: 50px;
            height: 50px;
            background: var(--primary);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 30px;
            box-shadow: 0 4px 10px rgba(37, 99, 235, 0.4);
        }

        .logo i {
            font-size: 1.8rem;
        }

        .nav-item {
            width: 100%;
            padding: 18px 0;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
            color: rgba(255, 255, 255, 0.7);
        }

        .nav-item.active {
            background: rgba(255, 255, 255, 0.1);
            color: white;
        }

        .nav-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 4px;
            background: var(--primary);
            transform: scaleY(0);
            transition: transform 0.3s;
        }

        .nav-item.active::before {
            transform: scaleY(1);
        }

        .nav-item i {
            font-size: 1.5rem;
            margin-bottom: 8px;
        }

        .nav-item .label {
            font-size: 0.8rem;
        }

        .nav-item:hover {
            background: rgba(255, 255, 255, 0.08);
            color: white;
        }

        /* 主内容区域 */
        .main-content {
            flex: 1;
            padding: 25px;
            overflow-y: auto;
            background: rgba(15, 23, 42, 0.65);
            overflow-x: hidden;
        }

        .page {
            display: none;
            animation: fadeIn 0.4s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(15px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .page.active {
            display: block;
        }

        .page-header {
            margin-bottom: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .page-title {
            font-size: 1.8rem;
            font-weight: 700;
            background: linear-gradient(90deg, #ffffff, #dbeafe);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .page-subtitle {
            color: var(--gray);
            margin-top: 8px;
            font-size: 1.05rem;
        }

        /* 卡片样式 */
        .card {
            background: rgba(30, 41, 59, 0.7);
            border-radius: 16px;
            box-shadow: var(--card-shadow);
            padding: 25px;
            margin-bottom: 25px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(8px);
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .card-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: white;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .card-title i {
            color: var(--primary);
        }

        /* 按钮样式 */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 12px 20px;
            border-radius: 10px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.25s;
            border: none;
            outline: none;
            font-size: 1rem;
            height: 46px;
            gap: 8px;
        }

        .btn i {
            font-size: 1.05rem;
        }

        .btn-primary {
            background: var(--primary);
            color: white;
            box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
        }

        .btn-primary:hover {
            background: var(--secondary);
            transform: translateY(-2px);
            box-shadow: 0 6px 14px rgba(59, 130, 246, 0.4);
        }

        .btn-outline {
            background: transparent;
            color: var(--primary);
            border: 1px solid var(--primary);
        }

        .btn-outline:hover {
            background: rgba(37, 99, 235, 0.1);
        }

        .btn-lg {
            padding: 14px 28px;
            font-size: 1.1rem;
            height: 56px;
        }

        /* 统计卡片 */
        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
            gap: 25px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 16px;
            padding: 25px;
            box-shadow: var(--card-shadow);
            border-left: 4px solid var(--primary);
            backdrop-filter: blur(8px);
            transition: all 0.3s;
        }

        .stat-card.warning {
            border-left-color: var(--warning);
        }

        .stat-card.success {
            border-left-color: var(--success);
        }

        .stat-title {
            font-size: 0.95rem;
            color: var(--gray);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .stat-value {
            font-size: 2.2rem;
            font-weight: 700;
            color: white;
        }

        .stat-trend {
            font-size: 0.9rem;
            margin-top: 8px;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .trend-up {
            color: var(--success);
        }

        .trend-down {
            color: var(--danger);
        }

        /* 快速扫描区域 */
        .scanner-area {
            background: rgba(15, 23, 42, 0.7);
            border: 3px dashed var(--primary);
            border-radius: 16px;
            height: 230px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-bottom: 25px;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }

        .scanner-area::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(37, 99, 235, 0.1), transparent);
            animation: scanAnimation 3s infinite linear;
            z-index: 0;
        }

        @keyframes scanAnimation {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .scanner-area .content {
            position: relative;
            z-index: 1;
            text-align: center;
        }

        .scanner-area i {
            font-size: 4.5rem;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 20px;
            transition: all 0.3s;
        }

        .scanner-text {
            font-size: 1.3rem;
            font-weight: 500;
            color: white;
            transition: all 0.3s;
        }

        .scanner-area:hover i,
        .scanner-area:hover .scanner-text {
            color: white;
            transform: scale(1.05);
        }

        /* 表单元素 */
        .form-group {
            margin-bottom: 25px;
        }

        .form-label {
            display: block;
            margin-bottom: 10px;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.85);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .form-control {
            width: 100%;
            padding: 14px 18px;
            background: rgba(15, 23, 42, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            font-size: 1rem;
            transition: all 0.3s;
            color: white;
        }

        .form-control:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
            background: rgba(15, 23, 42, 0.7);
        }

        .form-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }

        /* 表格样式 */
        .table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }

        .table th,
        .table td {
            padding: 16px 18px;
            text-align: left;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .table th {
            background: rgba(30, 41, 59, 0.9);
            font-weight: 600;
            color: var(--primary);
            font-size: 0.95rem;
        }

        .table tr {
            transition: all 0.2s;
        }

        .table tr:hover {
            background: rgba(37, 99, 235, 0.08);
        }

        /* 利润显示 */
        .profit {
            font-weight: 700;
            font-size: 1.1rem;
        }

        .profit.positive {
            color: var(--success);
        }

        .profit.negative {
            color: var(--danger);
        }

        /* 徽章 */
        .badge {
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
        }

        .badge.success {
            background: rgba(16, 185, 129, 0.15);
            color: var(--success);
        }

        .badge.warning {
            background: rgba(245, 158, 11, 0.15);
            color: var(--warning);
        }

        .badge.danger {
            background: rgba(239, 68, 68, 0.15);
            color: var(--danger);
        }

        /* 工具提示 */
        .tooltip {
            position: relative;
            display: inline-block;
            cursor: help;
            border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
        }

        .tooltip .tooltip-text {
            visibility: hidden;
            width: 200px;
            background: rgba(30, 41, 59, 0.95);
            color: white;
            text-align: center;
            border-radius: 8px;
            padding: 10px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 0.9rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .tooltip:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }

        /* 报表图表容器 */
        .chart-container {
            background: rgba(15, 23, 42, 0.7);
            border-radius: 16px;
            padding: 25px;
            margin-bottom: 25px;
            position: relative;
            height: 300px;
            overflow: hidden;
        }

        .chart-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: var(--gray);
        }

        .chart-placeholder i {
            font-size: 3rem;
            margin-bottom: 15px;
            color: var(--primary);
        }

        .chart-placeholder p {
            font-size: 1.1rem;
        }

        /* 设置卡片 */
        .settings-card {
            background: rgba(30, 41, 59, 0.7);
            border-radius: 16px;
            padding: 25px;
            margin-bottom: 25px;
            backdrop-filter: blur(8px);
        }

        .settings-group {
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .settings-title {
            font-size: 1.3rem;
            margin-bottom: 20px;
            color: white;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .settings-title i {
            color: var(--primary);
        }

        /* 开关按钮 */
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked + .slider {
            background-color: var(--primary);
        }

        input:checked + .slider:before {
            transform: translateX(26px);
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .sidebar {
                width: 100%;
                height: auto;
                flex-direction: row;
                padding: 0;
                overflow-x: auto;
            }

            .logo {
                margin: 10px 20px;
            }

            .nav-item {
                padding: 15px 10px;
                min-width: 70px;
            }

            .main-content {
                padding: 15px;
            }

            .stats-container {
                grid-template-columns: 1fr;
            }
        }

        /* 简道云风格增强 */
        .jdy-gradient-text {
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            font-weight: 700;
        }

        .jdy-card {
            background: linear-gradient(145deg, rgba(30,41,59,0.8), rgba(15,23,42,0.8));
            border: 1px solid rgba(124, 58, 237, 0.15);
        }

        .jdy-card-header {
            border-bottom: 1px solid rgba(124, 58, 237, 0.2);
        }

        .jdy-highlight {
            background: rgba(59, 130, 246, 0.15);
            border-radius: 8px;
            padding: 10px 15px;
        }
    </style>
</head>
<body>
<!-- 竖屏提示 -->
<div class="orientation-warning">
    <i class="fas fa-sync-alt"></i>
    <h2>请将手机旋转为横屏模式</h2>
    <p>为获得最佳操作体验，请在柜台使用横屏模式进行操作</p>
</div>

<div class="container">
    <!-- 侧边导航 -->
    <div class="sidebar">
        <div class="logo">
            <i class="fas fa-store"></i>
        </div>
        <div class="nav-item active" data-target="dashboard">
            <i class="fas fa-home"></i>
            <div class="label">首页</div>
        </div>
        <div class="nav-item" data-target="input">
            <i class="fas fa-barcode"></i>
            <div class="label">入库</div>
        </div>
        <div class="nav-item" data-target="sales">
            <i class="fas fa-cash-register"></i>
            <div class="label">销售</div>
        </div>
        <div class="nav-item" data-target="inventory">
            <i class="fas fa-boxes"></i>
            <div class="label">库存</div>
        </div>
        <div class="nav-item" data-target="reports">
            <i class="fas fa-chart-line"></i>
            <div class="label">报表</div>
        </div>
        <div class="nav-item" data-target="settings">
            <i class="fas fa-cog"></i>
            <div class="label">设置</div>
        </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
        <!-- 仪表盘页面 -->
        <div class="page active" id="dashboard">
            <div class="page-header">
                <div>
                    <h1 class="page-title">县城小超市ERP系统</h1>
                    <p class="page-subtitle">今日销售：¥3,245 | 库存商品：142种</p>
                </div>
                <div>
                    <span class="badge success">营业中</span>
                    <span class="badge warning">离线模式</span>
                </div>
            </div>

            <div class="stats-container">
                <div class="stat-card">
                    <div class="stat-title">
                        <i class="fas fa-coins"></i> 今日销售额
                    </div>
                    <div class="stat-value">¥3,245</div>
                    <div class="stat-trend trend-up">
                        <i class="fas fa-arrow-up"></i> 比昨日 +18.5%
                    </div>
                </div>
                <div class="stat-card warning">
                    <div class="stat-title">
                        <i class="fas fa-box-open"></i> 低库存商品
                    </div>
                    <div class="stat-value">8种</div>
                    <div class="stat-trend trend-down">
                        <i class="fas fa-arrow-down"></i> 比上周减少3种
                    </div>
                </div>
                <div class="stat-card success">
                    <div class="stat-title">
                        <i class="fas fa-wallet"></i> 本月利润
                    </div>
                    <div class="stat-value">¥28,560</div>
                    <div class="stat-trend trend-up">
                        <i class="fas fa-arrow-up"></i> 比上月 +12.5%
                    </div>
                </div>
            </div>

            <div class="card jdy-card">
                <div class="card-header jdy-card-header">
                    <h2 class="card-title"><i class="fas fa-barcode"></i> 商品入库</h2>
                    <button class="btn btn-outline">
                        <i class="fas fa-history"></i> 入库记录
                    </button>
                </div>

                <div class="scanner-area" onclick="simulateScan()">
                    <div class="content">
                        <i class="fas fa-barcode"></i>
                        <div class="scanner-text">点击扫码添加库存</div>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label"><i class="fas fa-barcode"></i> 商品条码</label>
                        <input type="text" class="form-control" id="barcodeInput" placeholder="手动输入或扫码">
                    </div>
                    <div class="form-group">
                        <label class="form-label"><i class="fas fa-box"></i> 入库数量</label>
                        <input type="number" class="form-control" value="1" min="1">
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label"><i class="fas fa-tag"></i> 商品名称</label>
                        <input type="text" class="form-control" placeholder="扫码后自动填充">
                    </div>
                    <div class="form-group">
                        <label class="form-label"><i class="fas fa-money-bill"></i> 进货单价</label>
                        <input type="number" class="form-control" placeholder="0.00">
                    </div>
                </div>

                <button class="btn btn-primary btn-lg" style="width:100%">
                    <i class="fas fa-save"></i> 确认入库
                </button>
            </div>
        </div>

        <!-- 商品入库页面 -->
        <div class="page" id="input">
            <!-- 入库页面内容 -->
        </div>

        <!-- 销售收银页面 -->
        <div class="page" id="sales">
            <!-- 销售页面内容 -->
        </div>

        <!-- 库存管理页面 -->
        <div class="page" id="inventory">
            <!-- 库存页面内容 -->
        </div>

        <!-- ============== 新增报表页面 ============== -->
        <div class="page" id="reports">
            <div class="page-header">
                <div>
                    <h1 class="page-title">经营报表分析</h1>
                    <p class="page-subtitle">销售、利润与库存数据分析</p>
                </div>
                <button class="btn btn-outline" onclick="navigateTo('dashboard')">
                    <i class="fas fa-arrow-left"></i> 返回首页
                </button>
            </div>

            <div class="card jdy-card">
                <div class="card-header jdy-card-header">
                    <h2 class="card-title"><i class="fas fa-calendar-alt"></i> 时间范围筛选</h2>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label"><i class="fas fa-calendar"></i> 开始日期</label>
                        <input type="date" class="form-control" value="2023-10-01">
                    </div>
                    <div class="form-group">
                        <label class="form-label"><i class="fas fa-calendar"></i> 结束日期</label>
                        <input type="date" class="form-control" value="2023-10-28">
                    </div>
                    <div class="form-group">
                        <label class="form-label"><i class="fas fa-filter"></i> 快速筛选</label>
                        <select class="form-control">
                            <option>本月数据</option>
                            <option>近7天</option>
                            <option>近30天</option>
                            <option>今年数据</option>
                        </select>
                    </div>
                </div>
                <button class="btn btn-primary">
                    <i class="fas fa-sync-alt"></i> 生成报表
                </button>
            </div>

            <div class="card jdy-card">
                <div class="card-header jdy-card-header">
                    <h2 class="card-title"><i class="fas fa-chart-bar"></i> 销售趋势分析</h2>
                    <div class="btn-group">
                        <button class="btn btn-outline">日数据</button>
                        <button class="btn btn-outline">周数据</button>
                        <button class="btn btn-primary">月数据</button>
                    </div>
                </div>

                <div class="chart-container">
                    <div class="chart-placeholder">
                        <i class="fas fa-chart-line"></i>
                        <p>销售趋势图表（此处为模拟图表）</p>
                        <p class="jdy-highlight">本月销售额：¥32,645 | 环比增长：8.5%</p>
                    </div>
                </div>
            </div>

            <div class="card jdy-card">
                <div class="card-header jdy-card-header">
                    <h2 class="card-title"><i class="fas fa-money-bill-wave"></i> 利润分析报表</h2>
                    <button class="btn btn-outline">
                        <i class="fas fa-download"></i> 导出Excel
                    </button>
                </div>

                <div class="stats-container">
                    <div class="stat-card">
                        <div class="stat-title">
                            <i class="fas fa-coins"></i> 总销售额
                        </div>
                        <div class="stat-value">¥32,645</div>
                        <div class="stat-trend trend-up">
                            <i class="fas fa-arrow-up"></i> 8.5% 环比增长
                        </div>
                    </div>
                    <div class="stat-card success">
                        <div class="stat-title">
                            <i class="fas fa-wallet"></i> 总利润
                        </div>
                        <div class="stat-value">¥7,835</div>
                        <div class="stat-trend trend-up">
                            <i class="fas fa-arrow-up"></i> 10.2% 环比增长
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-title">
                            <i class="fas fa-percentage"></i> 利润率
                        </div>
                        <div class="stat-value">24.0%</div>
                        <div class="stat-trend trend-up">
                            <i class="fas fa-arrow-up"></i> 增长1.2%
                        </div>
                    </div>
                </div>

                <table class="table">
                    <thead>
                    <tr>
                        <th>商品分类</th>
                        <th>销售额</th>
                        <th>利润</th>
                        <th>利润率</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>食品饮料</td>
                        <td>¥15,240</td>
                        <td class="profit positive">¥3,658</td>
                        <td>24.0%</td>
                    </tr>
                    <tr>
                        <td>烟酒副食</td>
                        <td>¥10,845</td>
                        <td class="profit positive">¥2,819</td>
                        <td>26.0%</td>
                    </tr>
                    <tr>
                        <td>日化用品</td>
                        <td>¥4,320</td>
                        <td class="profit positive">¥954</td>
                        <td>22.1%</td>
                    </tr>
                    <tr>
                        <td>生活用品</td>
                        <td>¥2,240</td>
                        <td class="profit positive">¥404</td>
                        <td>18.0%</td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <div class="card jdy-card">
                <div class="card-header jdy-card-header">
                    <h2 class="card-title"><i class="fas fa-box-open"></i> 库存周转分析</h2>
                    <span>本月数据</span>
                </div>

                <div class="stats-container">
                    <div class="stat-card warning">
                        <div class="stat-title">
                            <i class="fas fa-box"></i> 商品总数
                        </div>
                        <div class="stat-value">142</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-title">
                            <i class="fas fa-exchange-alt"></i> 平均周转天数
                        </div>
                        <div class="stat-value">28.5</div>
                        <div class="stat-trend trend-down">
                            <i class="fas fa-arrow-down"></i> 减少2.3天
                        </div>
                    </div>
                    <div class="stat-card danger">
                        <div class="stat-title">
                            <i class="fas fa-exclamation-triangle"></i> 滞销商品
                        </div>
                        <div class="stat-value">12</div>
                        <div class="stat-trend trend-up">
                            <i class="fas fa-arrow-up"></i> 增加3个
                        </div>
                    </div>
                </div>

                <table class="table">
                    <thead>
                    <tr>
                        <th>商品名称</th>
                        <th>当前库存</th>
                        <th>周转天数</th>
                        <th>状态</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>百事可乐（老包装）</td>
                        <td>56</td>
                        <td>65</td>
                        <td><span class="badge danger">滞销</span></td>
                    </tr>
                    <tr>
                        <td>东北木耳（盒装）</td>
                        <td>26</td>
                        <td>48</td>
                        <td><span class="badge warning">周转慢</span></td>
                    </tr>
                    <tr>
                        <td>五芳斋粽子（咸味）</td>
                        <td>38</td>
                        <td>42</td>
                        <td><span class="badge warning">周转慢</span></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- ============== 新增设置页面 ============== -->
        <div class="page" id="settings">
            <div class="page-header">
                <div>
                    <h1 class="page-title">系统设置</h1>
                    <p class="page-subtitle">配置系统参数和管理账户</p>
                </div>
                <button class="btn btn-outline" onclick="navigateTo('dashboard')">
                    <i class="fas fa-arrow-left"></i> 返回首页
                </button>
            </div>

            <div class="settings-card">
                <div class="settings-group">
                    <h3 class="settings-title"><i class="fas fa-sliders-h"></i> 系统设置</h3>
                    <div class="form-group">
                        <div class="form-label">
                            <i class="fas fa-mobile-alt"></i> 强制横屏模式
                            <span class="tooltip">
                                    <i class="fas fa-question-circle"></i>
                                    <span class="tooltip-text">开启后系统将始终以横屏模式显示</span>
                                </span>
                        </div>
                        <label class="switch">
                            <input type="checkbox" checked>
                            <span class="slider"></span>
                        </label>
                    </div>

                    <div class="form-group">
                        <div class="form-label">
                            <i class="fas fa-bell"></i> 库存预警通知
                            <span class="tooltip">
                                    <i class="fas fa-question-circle"></i>
                                    <span class="tooltip-text">当库存低于设定值时发送通知</span>
                                </span>
                        </div>
                        <label class="switch">
                            <input type="checkbox" checked>
                            <span class="slider"></span>
                        </label>
                    </div>

                    <div class="form-group">
                        <div class="form-label">
                            <i class="fas fa-print"></i> 小票打印机设置
                        </div>
                        <select class="form-control">
                            <option>USB打印机 (XP-58)</option>
                            <option>蓝牙打印机 (PT-210)</option>
                            <option>网络打印机</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <div class="form-label">
                            <i class="fas fa-barcode"></i> 扫码枪设置
                        </div>
                        <select class="form-control">
                            <option>通用扫码枪模式</option>
                            <option>新大陆 NLS-EM20</option>
                            <option>霍尼韦尔 1900</option>
                            <option>斑马 DS2208</option>
                        </select>
                    </div>
                </div>

                <div class="settings-group">
                    <h3 class="settings-title"><i class="fas fa-users-cog"></i> 用户管理</h3>

                    <div class="card" style="background: rgba(15,23,42,0.5); margin-bottom:25px;">
                        <div style="display: flex; justify-content: space-between; align-items: center;">
                            <div>
                                <div style="font-size: 1.1rem; font-weight:600;">张老板 (店主)</div>
                                <div style="color: var(--gray);">admin@store.com</div>
                            </div>
                            <div>
                                <span class="badge success">管理员</span>
                                <button class="btn btn-outline" style="margin-left:10px;">
                                    <i class="fas fa-edit"></i> 修改
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="card" style="background: rgba(15,23,42,0.5); margin-bottom:25px;">
                        <div style="display: flex; justify-content: space-between; align-items: center;">
                            <div>
                                <div style="font-size: 1.1rem; font-weight:600;">李店员 (营业员)</div>
                                <div style="color: var(--gray);">li@store.com</div>
                            </div>
                            <div>
                                <span class="badge">普通用户</span>
                                <button class="btn btn-outline" style="margin-left:10px;">
                                    <i class="fas fa-edit"></i> 修改
                                </button>
                            </div>
                        </div>
                    </div>

                    <button class="btn btn-primary">
                        <i class="fas fa-user-plus"></i> 添加新用户
                    </button>
                </div>

                <div class="settings-group">
                    <h3 class="settings-title"><i class="fas fa-database"></i> 数据管理</h3>

                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label"><i class="fas fa-file-export"></i> 数据导出</label>
                            <button class="btn btn-outline" style="width:100%;">
                                <i class="fas fa-download"></i> 导出所有数据
                            </button>
                        </div>
                        <div class="form-group">
                            <label class="form-label"><i class="fas fa-cloud-upload-alt"></i> 数据备份</label>
                            <button class="btn btn-outline" style="width:100%;">
                                <i class="fas fa-cloud"></i> 备份到云端
                            </button>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label"><i class="fas fa-history"></i> 数据恢复</label>
                        <input type="file" class="form-control">
                    </div>
                </div>

                <div class="settings-group" style="border-bottom: none; padding-bottom: 0;">
                    <h3 class="settings-title"><i class="fas fa-info-circle"></i> 系统信息</h3>

                    <div class="form-group">
                        <div style="display:flex; justify-content: space-between; margin-bottom:10px;">
                            <span>版本号:</span>
                            <span>v2.3.1</span>
                        </div>
                        <div style="display:flex; justify-content: space-between; margin-bottom:10px;">
                            <span>最后更新:</span>
                            <span>2023-10-25</span>
                        </div>
                        <div style="display:flex; justify-content: space-between;">
                            <span>数据库状态:</span>
                            <span class="badge success">正常</span>
                        </div>
                    </div>

                    <button class="btn btn-primary">
                        <i class="fas fa-sync-alt"></i> 检查更新
                    </button>

                    <button class="btn btn-outline" style="margin-left:10px;">
                        <i class="fas fa-question-circle"></i> 帮助中心
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 页面导航功能
    function navigateTo(pageId) {
        // 隐藏所有页面
        document.querySelectorAll('.page').forEach(page => {
            page.classList.remove('active');
        });

        // 显示目标页面
        document.getElementById(pageId).classList.add('active');

        // 更新导航激活状态
        document.querySelectorAll('.nav-item').forEach(item => {
            item.classList.remove('active');
        });

        // 找到对应的导航项并激活
        document.querySelector(`.nav-item[data-target="${pageId}"]`).classList.add('active');

        // 滚动到顶部
        document.querySelector('.main-content').scrollTop = 0;
    }

    // 导航项点击事件
    document.querySelectorAll('.nav-item').forEach(item => {
        item.addEventListener('click', function() {
            const targetPage = this.getAttribute('data-target');
            navigateTo(targetPage);
        });
    });

    // 模拟扫码功能
    function simulateScan() {
        const barcodeInput = document.getElementById('barcodeInput');
        const sampleBarcodes = [
            '6920152411028', // 康师傅
            '6926410328120', // 清风纸巾
            '6902890234099', // 双汇火腿肠
            '6921168590018'  // 农夫山泉
        ];

        const randomBarcode = sampleBarcodes[Math.floor(Math.random() * sampleBarcodes.length)];

        // 显示扫描动画效果
        const scannerArea = document.querySelector('.scanner-area');
        const originalContent = scannerArea.querySelector('.content');

        originalContent.style.opacity = '0';

        const scanningText = document.createElement('div');
        scanningText.className = 'content';
        scanningText.innerHTML = `
                <i class="fas fa-barcode fa-flip" style="font-size: 4.5rem; color: #3b82f6;"></i>
                <div class="scanner-text" style="color: #3b82f6;">扫描中...</div>
            `;
        scannerArea.appendChild(scanningText);

        // 模拟扫描过程
        setTimeout(() => {
            scannerArea.removeChild(scanningText);
            originalContent.style.opacity = '1';

            barcodeInput.value = randomBarcode;
            barcodeInput.focus();

            // 显示成功提示
            const successText = document.createElement('div');
            successText.className = 'content';
            successText.innerHTML = `
                    <i class="fas fa-check-circle" style="font-size: 4.5rem; color: #10b981;"></i>
                    <div class="scanner-text" style="color: #10b981;">扫描成功！</div>
                `;
            scannerArea.appendChild(successText);

            setTimeout(() => {
                scannerArea.removeChild(successText);
                originalContent.style.opacity = '1';
            }, 2000);
        }, 1500);
    }

    // 初始化页面
    document.addEventListener('DOMContentLoaded', function() {
        // 设置首页为活动状态
        navigateTo('dashboard');
    });
</script>
</body>
</html>